<template>
  <div class="administratorManagement">
    <!-- <div></div> -->
    <!-- <h1>管理员管理</h1> -->
    <div style="width: 98%; margin: auto">
      <div class="header">
        <div>
          <el-button type="primary"> 新增 </el-button>
          <el-button>批量删除</el-button>
        </div>
        <div class="header-right">
          <el-input
            placeholder="请输入岗亭名称"
            prefix-icon="el-icon-search"
            v-model="searchinput"
            clearable
          ></el-input>
          <el-button type="primary">查询</el-button>
        </div>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          prop="roleId"
          header-align="center"
          align="center"
          width="80"
          label="ID"
        >
        </el-table-column>
        <el-table-column
          prop="roleName"
          header-align="center"
          align="center"
          label="角色名称"
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          header-align="center"
          align="center"
          label="备注"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          header-align="center"
          align="center"
          width="180"
          label="创建时间"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="addOrUpdateHandle(scope.row.roleId)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="addOrUpdateHandle(scope.row.roleId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getUserAllList } from "../common/Api/index";
export default {
  data() {
    return {
      searchinput: "",
      tableData: [
        {
          createTime: "2021-08-06 23:36:44",
          createUserId: 1,
          flag: false,
          menuIdList: null,
          remark: "",
          roleId: 18,
          roleName: "管理水果",
        },
        {
          createTime: "2021-08-06 23:35:33",
          createUserId: 1,
          flag: false,
          menuIdList: null,
          remark: "",
          roleId: 17,
          roleName: "财务管理员",
        },
        {
          createTime: "2019-05-16 10:31:42",
          createUserId: 1,
          flag: false,
          menuIdList: null,
          remark: "普通管理员",
          roleId: 5,
          roleName: "普通管理员",
        },
        {
          createTime: "2019-05-13 09:42:19",
          createUserId: 1,
          flag: false,
          menuIdList: null,
          remark: "超级管理员",
          roleId: 1,
          roleName: "超级管理员",
        },
      ],
    };
  },
  activated() {},
  mounted() {
    console.log(this.tableData);
  },
  methods: {
    addOrUpdateHandle() {},
    addApproval() {},
  },
};
</script>
<style lang="scss">
.administratorManagement {
  width: 100%;
  height: 100%;
  background: #fff;
  .header {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    .header-right {
      width: 20%;
      .el-input {
        width: 70% !important;
      }
    }
  }
}
</style>